<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="入库量(本月)" >
      
          <div>
            <mini-area :data-source="chartData.sll" />
          </div>
         
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="出库量(本月)" >
      
          <div>
            <New-Mini-area :data-source="chartData.bjl"/>
          </div>
         
        </chart-card>
      </a-col>
<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="还库量(本月)" >
         
          <div>
            <mini-bar :datasource="chartData.isll" :height="50"/>
          </div>
          
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="废弃量(本月)" >
         
          <div>
            <NewMiniBar :datasource="chartData.ibjl" :height="50"/>
          </div>
          
        </chart-card>
      </a-col>-->
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          

          <a-tab-pane loading="true" tab="在库管理" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <index-bar title="实时在库数据" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>

  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import ChartCard from '@/components/ChartCard'
  import MiniBar from '@/components/chart/MiniBar'
  import NewMiniBar from "../../components/chart/NewMiniBar.vue"
  import MiniArea from '@/components/chart/MiniArea'
  import NewMiniArea from "../../components/chart/NewMiniArea.vue"
  import IndexBar from '@/components/chart/IndexBar'
  import BarMultid from '@/components/chart/BarMultid'
  import DashChartDemo from '@/components/chart/DashChartDemo'
  import { getAction,postAction } from '../../api/manage'

  const jhjgData = [
   
  ]

  const jhjgFields=[
   
  ]

  const xljgData = [
   
  ]
  const xljgFields=[]

  const dataCol1 = [];
  const dataSource1=[
  ]

  const dataCol2 = [{
   
  }];
  const dataSource2=[
  
  ]

  export default {
    name: "IndexBdc",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      NewMiniArea,
      MiniArea,
      NewMiniBar,
      MiniBar,
      DashChartDemo,
      BarMultid,
      IndexBar
    },
    data() {
      return {
        loading: true,
        cardCount:{
          sll:100,
          bjl:87,
          isll:15,
          ibjl:9
        },

        todaySll:10,
        todayBjl:54,
        todayISll:13,
        todayIBjl:7,

        chartData:{
          sll:[],
          bjl:[],
          isll:[],
          ibjl:[]
        },
        jhjgFields,
        jhjgData,

        xljgData,
        xljgFields,

        diskInfo:[
        
        ],

        registerTypeList:[],

        dataSource1:[],
        dataSource2:[],
        columns:dataCol1,
        columns2:dataCol2,
        ipagination1:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,

        },
        ipagination2:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
        },
        indexRegisterType:"转移登记",
        indexBottomTab:"1"

      }
    },
    methods:{
      // getruku(){
      //   postAction('/yzd_rukuguanli/yzdShenqingguanli/getRukuData').then(res => {
      //     console.log(this.chartData.sll);
      //     console.log(res.result);
      //     this.chartData.sll = res.result
      //     console.log(this.chartData.sll);
          
      //   })
      // },


      gettudate(){
        getAction('/yzd_zaikuguanli/yzdZaikuguanlimingxi/gettuxinglist').then((res) => {
          this.$nextTick(()=>{
            // this.initChartbing(res.result)
            // this.initChartzhu(res.result)
			    })
        })
      },


      goPage(){
        this.$message.success("根据业务自行处理跳转页面!")
      },
      changeRegisterType(e){
        this.indexRegisterType = e.target.value
        if(this.indexBottomTab=="1"){
          this.loadDataSource1()
        }else{
          this.loadDataSource2()
        }
      },
      tableChange1(pagination){
        this.ipagination1.current = pagination.current
        this.ipagination1.pageSize = pagination.pageSize
        this.queryTimeoutInfo()
      },
      tableChange2(pagination){
        this.ipagination2.current = pagination.current
        this.ipagination2.pageSize = pagination.pageSize
        this.queryNodeTimeoutInfo()
      },
      getFlowRateNumber(value){
        return Number(value)
      },
      getPercentFormat(value){
        if(value==100){
          return "超时"
        }else{
          return value+"%"
        }
      },
      getPercentColor(value){
        let p = Number(value)
        if(p>=90 && p<100){
          return 'rgb(244, 240, 89)'
        }else if(p>=100){
          return 'red'
        }else{
          return 'rgb(16, 142, 233)'
        }
      },

      loadDataSource1(){
        this.dataSource1 = dataSource1.filter(item=>{
          if(!this.indexRegisterType){
            return true
          }
          return item.type==this.indexRegisterType
        })
      },
      loadDataSource2(){
        this.dataSource2 = dataSource2.filter(item=>{
          if(!this.indexRegisterType){
            return true
          }
          return item.type==this.indexRegisterType
        })
      }
    },
    created() {
      // this.getruku()
      this.loadDataSource1()
      this.loadDataSource2()
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;
    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .item-group {
    .more-btn {
      margin-bottom: 13px;
      text-align: center;
    }
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
  }

  @media only screen and (min-width: 1600px) {
    .list-content-item{
      margin-left:60px;
    }
  }

  @media only screen and (max-width: 1300px) {
    .list-content-item{
      margin-left:20px;
    }
    .width-hidden4{
      display:none
    }
  }
  .list-content-item{
    span{line-height: 20px;}
  }
  .list-content-item{
    p{margin-top: 4px;margin-bottom:0;line-height:22px;}
  }
  .anty-list-cust {
    .ant-list-item-meta{flex: 0.3 !important;}
  }
  .anty-list-cust {
    .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
  }


</style>